//
//	Simple Grid
//	Copyright (c) 2013 Kumail Hunaid
//
//	Permission is hereby granted, free of charge, to any person obtaining a copy
//	of this software and associated documentation files (the "Software"), to deal
//	in the Software without restriction, including without limitation the rights
//	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
//	copies of the Software, and to permit persons to whom the Software is
//	furnished to do so, subject to the following conditions:
//
//	The above copyright notice and this permission notice shall be included in
//	all copies or substantial portions of the Software.
//
//	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
//	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
//	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
//	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
//	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
//	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
//	THE SOFTWARE.
//


// TODO: dependant on this
// *, *:before, *:after
// 	-webkit-box-sizing: border-box
// 	-moz-box-sizing: border-box
// 	box-sizing: border-box

// TODO
// Add "vertical-gap" class for mobile responsiveness

=_clear
	zoom: 1
	&:before, &:after
		content: ""
		display: table
	&:after
		clear: both

=_breakpoints($min, $max: false)
	@if $max == false
		@media only screen and (min-width: $min)
			@content
	@else
		@media only screen and (min-width: $min) and (max-width: $max)
			@content

// The spacing between columns
$gutters: 10, 20, 30, 40, 50, 60, 80
$max-columns: 12

// Merge grids at
$merge_grids_breakpoint: 700px


// Generate a grid class for each column
@for $grid_i from 1 through $max-columns

	.grid-#{$grid_i}
		// The parent will span the entire width. Clear to contain children
		width: 100%
		+_clear

		// Create span classes from 1 to the maximum grid columns for this
		// particular grid.
		@for $span_i from 1 through $grid_i
			& > .span-#{$span_i}
				// each span element is fraction of this parent
				// what fraction? span-1 is 1/x of x. span-2 is 2/x of x.
				// calculate the width of the span by finding the width of
				// span-1, then multiply by the nth span
				width: (100% / $grid_i) * $span_i
				min-height: 1px
				float: left

			+_breakpoints(0, $merge_grids_breakpoint)
				.span-#{$span_i}
					width: 100%

		// If the gutter class is attached to the grid class, apply a padding to
		// all child span classes.
		@each $gutter in $gutters
			&.gutter-#{$gutter}
				// repeat the previous loop and apply a padding
				@for $span_i from 1 through $grid_i
					& > .span-#{$span_i}
						// each element needs to get half the gutter as padding
						// they join to complete the gutter
						padding: 0 (($gutter / 2) * 1px)
						&:first-child
							padding-left: 0
						&:last-child
							padding-right: 0

					+_breakpoints(0, $merge_grids_breakpoint)
						.span-#{$span_i}
							padding: 0
